<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/search.css">
    <style>

    </style>
</head>

<body>
    <div class="wrapt">
        <div class="logo">
            <!-- logo -->
            <img src="./images/logo.png" alt="">
        </div>
        <!-- 搜索 -->
        <div class="search bar1">

            <input type="text" id="demo" placeholder="请输入您要搜索的内容..." class="form-input">
            <button type="submit" value="">搜索</button>

        </div>
    </div>

    <div class="con">

    </div>
</body>



<script src="../../ajax.js">
</script>
<script src="./js/search.js"></script>
<script>
    //3.如果框中输入的值属于1中的数据，那么就渲染页面。 


    // for (var key in this.data[i]) {
    //     this.keys.push(key);
    //     this.values.push(this.data[i]["name"])
    // }


    // if (that.valueN.indexOf(this.value) != -1) {

    // }
    // that.display();



    // //1 判断通过ajax 请求回来的数据  -拿到数据里面的所有name的属性,放到一个数组
    // // console.log(this.data[1].name)
    // this.str = '';
    // for (var i = 0; i < this.data.length; i++) {
    //     this.str += this.data[i].name;
    //     that.str = `<p>${this.value}</p><p>${that.data[i].price}</p>`
    // }
    // console.log(this.str)


    //2. 判断框中的输入的值,   怎么将输出的值保存出来,貌似只能在里面拿到数据

    //直接拿到str 中的商品名，但是拿不到其他的数据
    // this.input.oninput = function() {
    //     // console.log(this.value)
    //     if (that.str.indexOf(this.value) != -1) {

    //         // this.data[i].name;

    //         that.str2 = `<p>${this.value}</p><p>${that.data[i].price}</p>`

    //     }
    // }




    // this.input.oninput = function() {
    //     // console.log(this.value)
    //     if (that.str.indexOf(this.value) != -1) {

    //         // this.data[i].name;

    //         that.str = `<p>${this.value}</p>`
    //         that.display();
    //     }


    // console.log(this.arr2)
    // ajaxGet(that.url, (res) => {
    //     that.data = JSON.parse(res)
    //     console.log(that.data)
    //     for (var i = 0; i < this.data.length; i++) {

    //         this.input.oninput = function() {
    //             // console.log(this.value)
    //             if (that.str.indexOf(this.value) != -1) {

    //                 // this.data[i].name;

    //                 that.str2 = `<p>${this.value}</p><p>${that.data[i].price}</p>`

    //             }
    //         }

    // this.input.oninput = function() {
    //         let str = "";
    //         that.data.forEach(val => {
    //             str += `${that.data.name}`
    //             console.log(str)
    //         });
    //         // console.log(this.value)
    //     }
    // this.guge.addEventListener("click", () => {
    //     console.log(1)
    //     for (var i = 0; i < that.data.length; i++) {
    //         that.msg = that.data[i].name;
    //         if (this.value === that.msg) {

    //         }
    //     }
    // });



    // this.input.onkeydown = function(e) {
    //     var theEvent = window.event || e;
    //     var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    //     for (var i = 0; i < that.data.length; i++) {
    //         that.msg = that.data[i].name;
    //         if (code == 13) {
    //             console.log(that.msg)
    //         }
    //     }

    // }


    // this.input.addEventListener("click", function() {

    // });


    // this.guge.addEventListener("click", () => {

    //     for (var i = 0; i < that.data.length; i++) {
    //         that.msg = that.data[i].name;
    //     }
    //     console.log(that.msg)

    // })
</script>

</html>